@extends('wx.layout.default')

@section('wx.pheader')
  @include('wx.layout.swiper')
@stop

@section('wx.pbody')

  <header class="timer-header">
    <h2 class="timer-title">{!! $publish->present()->EnrolStatus !!}</h1>
  </header>


  @if(count($enrols)>=1)

    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd" style="font-size: 16px; color:#1aad19;">已报名的课程/班级</div>
      @foreach($enrols as $enrol)
        <div class="weui-panel__hd ">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">{{$enrol->grade->name}}</h4>
            <p class="weui-media-box__desc enrol enrol-status{{$enrol->status}}">

            </p>
            <ul class="weui-media-box__info">
              @if($enrol->grade->exam == 1)
                <li class="weui-media-box__info__meta grey">
                  考试时间：{{date('Y-m-d',$enrol->grade->exam_date)}} {{ date('H:i',strtotime($enrol->grade->exam_begin)) }}
                  -{{ date('H:i',strtotime($enrol->grade->exam_end)) }}</li>
              @endif
              <li class="weui-media-box__info__meta grey">
                上课时间：{!! $enrol->grade->present()->WeekDay !!} {{ date('H:i',strtotime($enrol->grade->grade_begin)) }}
                -{{ date('H:i',strtotime($enrol->grade->grade_end)) }}</li>

            </ul>
          </div>
        </div>
      @endforeach
    </div>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_default" href="{{route('wx.index')}}">返回</a>
    </div>
  @endif


  <div class="weui-panel weui-panel_access" style="margin-top:40px;">
    <div class="weui-panel__hd" style="font-size: 16px; color:#1aad19;">{{$publish->name}}</div>
    @foreach($publish->grades as $grade)
      @if($user->can && $publish->started == 1 && $publish->ended == 0)
        <div class="weui-panel__hd selected" data-publish-id="{{$publish->id}}" data-plan-id="{{$publish->plan->id}}"
             data-grade-id="{{$grade->id}}" data-category-id="{{$grade->cid}}">
          @else
            <div class="weui-panel__hd">
              @endif

              <div class="weui-media-box weui-media-box_text">
                <h4 class="weui-media-box__title">{{$grade->name}}</h4>
                <p class="weui-media-box__desc" style="font-weight: normal;">
                  @if($grade->exam == 1)
                    {{$grade->content}} <br/>
                  @endif
                  {{$grade->desc}}</p>
                <ul class="weui-media-box__info">
                  <li class="weui-media-box__info__meta blue">招生人数：<b>{{ $grade->number }}</b></li>
                  <li class="weui-media-box__info__meta green">报名人数：<b>{{ $grade->accepted->count() }}</b></li>
                  @if($grade->exam == 1)
                    <li class="weui-media-box__info__meta grey">
                      考试时间：{{date('Y-m-d',$grade->exam_date)}} {{ date('H:i',strtotime($grade->exam_begin)) }}
                      -{{ date('H:i',strtotime($grade->exam_end)) }}</li>
                  @endif
                  <li class="weui-media-box__info__meta grey">
                    上课时间：{!! $grade->present()->WeekDay !!} {{ date('H:i',strtotime($grade->grade_begin)) }}
                    -{{ date('H:i',strtotime($grade->grade_end)) }}</li>
                  <li class="weui-media-box__info__meta"><b>{!! $grade->present()->OpusStatus !!}</b></li>
                </ul>
              </div>
            </div>

            @endforeach


        </div>

        @if($user->can && $publish->started == 1 && $publish->ended == 0)
          <form class="form-horizontal" id="gradesign" autocomplete="off">
            {{ csrf_field() }}
            <input type="hidden" name="uid" value="{{$user->id}}"/>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                  {{$user->name}}
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" name="mobile" type="tel" placeholder="请输入注册的手机号码" maxlength="11">
                </div>
              </div>
              <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd">
                  <label class="weui-label">验证码</label>
                </div>
                <div class="weui-cell__bd">
                  <input class="weui-input" name="smscode" value="" type="tel" placeholder="请输入验证码" maxlength="6">
                </div>
                <div class="weui-cell__ft">
                  <button class="weui-vcode-btn sms" type="button">获取验证码</button>
                </div>
              </div>
              <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" id="btnSign" href="javascript:">我要报名</button>
              </div>

            </div>

          </form>
        @endif

        @stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
  <script type="text/javascript">


  $(function () {


      $(".selected").on('click', function (e) {
          $(this).addClass("grade-selected");
          $(".selected").not(this).removeClass("grade-selected");

      });


      $('.sms').on('click', function () {

          var uri = '{{route('wx.sms')}}';

          $.post(uri, {
              '_token': $("input[name='_token']").attr('value'),
              'mobile': $("input[name='mobile']").val(),
              'is_submit': true
          }, function (data) {
              layer.msg(data.message, {time: 1000, shift: -1}, function () {
                  if (data.status === true && data.url != null) {
                      $(window).attr('location', data.url);
                  }
              });

          }, 'json').error(function (data) {
              layer.msg(data.responseJSON.message);
          });

          var count = 60;
          const countDown = setInterval(() => {

              if (count === 0) {
                  $(this).text('获取验证码').removeAttr('disabled');
                  $(this).removeClass("grey");
                  clearInterval(countDown);
              } else {
                  $(this).attr('disabled', true);
                  $(this).addClass("grey");
                  $(this).text(count + '秒后重新发送');
              }
              count--;
          }, 1000);

      });

      $("#gradesign").validate({

          onfocusout: false,
          onkeyup: false,

          rules: {
              mobile: {required: true, isMobile: true},
              smscode: {required: true, digits: true, maxlength: 6, minlength: 6,},
              publish_id: {required: true},
          },
          messages: {
              mobile: {required: "请填写手机号码"},
              smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"},
              publish_id: {required: "请选择课程"},
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.tips(v.message, v.element, {tips: 3, time: 2000});
                  return false;
              });
          },

          submitHandler: function (form) {
              $.post('{{route('wx.enrol', $type)}}', {
                  '_token': $("input[name='_token']").attr('value'),
                  'mobile': $("input[name='mobile']").val(),
                  'publish_id': $('.grade-selected').data('publish-id'),
                  'plan_id': $('.grade-selected').data('plan-id'),
                  'category_id': $('.grade-selected').data('category-id'),
                  'grade_id': $('.grade-selected').data('grade-id'),
                  'uid': $("input[name='uid']").val(),
                  'smscode': $("input[name='smscode']").val(),
                  'source': 1,
                  'is_submit': true
              }, function (data) {
                  console.log(data);
                  layer.msg(data.message, {shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });
          }

      });

      var starttime = new Date('{{date('Y-m-d H:i',$publish->begin)}}');
      setInterval(function () {
          var nowtime = new Date();
          var time = starttime - nowtime;
          var day = parseInt(time / 1000 / 60 / 60 / 24);
          var hour = parseInt(time / 1000 / 60 / 60 % 24);
          var minute = parseInt(time / 1000 / 60 % 60);
          var seconds = parseInt(time / 1000 % 60);
          $('.timer').html(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
      }, 1000);


      $('.swiper-container').swiper({
        loop: true,
        autoplay: 5000,
        pagination: '.swiper-pagination',
        paginationClickable: true
      });

  });
  </script>
@stop